<template>
	<div class="buisness-record-container">
		<div class="header">
			<el-button type="primary" :class="recordData.length === 0 ? 'gray-btn' : 'download-btn'" @click="onClickDownload" :disabled="recordData.length === 0 ? true : false">下载</el-button>
			<div class="search">
				<el-select v-model="agentName" placeholder="所有坐席" @change="searchRecordByName">
					<el-option v-for="item in options" :key="item" :label="item.label" :value="item.value"> </el-option>
				</el-select>
				<el-input placeholder="请输入搜索内容" v-model="searchKeyWord" @keyup.enter.native="searchContent">
					<el-button slot="append" icon="el-icon-search" @click="searchContent"></el-button>
				</el-input>
			</div>
		</div>
		<div v-if="recordData.length !== 0" class="buisness-item-wrapper">
			<div class="buisness-box" v-for="item in recordData" :key="item">
				<!-- <span>{{ item }}</span> -->
				<p class="buisness-title">
					<span v-html="item.title"></span>
				</p>
				<div class="message-box" v-if="item">
					<div class="left-userAvatar">
						<el-avatar :size="50" :src="item.fromUser.picture" v-if="item && item.fromUser && item.fromUser.picture"></el-avatar>
						<el-avatar :size="50" :src="systemAvata" v-else></el-avatar>
					</div>
					<div class="right-message">
						<p class="agent-time">
							<span class="agent-name" v-html="item.fromUser.name" v-if="item && item.fromUser && item.fromUser.name"></span>
							<span class="buisness-startAtTime" v-html="item.createdAt"></span>
						</p>
						<div class="operationDesc-text" v-html="item.data.text"></div>
						<div v-if="item.type === 'richtext'" @click="openRichText(item.link)" class="richtext-look">查看</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 推送富文本组件-->
		<RichText v-if="showRichText" :dialogVisible="showRichText" :richText="richText" @close="closeRichText" />
	</div>
</template>

<script>
import { getBusinessRecord } from '@/api/api.js';
import MsgRecord from '@/utils/MessageRecord';
import _ from 'lodash';
import RichText from '../QualityInspection/components/RichText.vue';
import { saveAs } from 'file-saver';
import { setOperationLogFuntion } from '@/utils/tool.js';
import systemImg from '@/assets/img/system.png';
export default {
	components: { RichText },
	props: {
		sessionId: {
			type: String,
			require: true,
			default: () => ''
		},
		index: {
			type: Number,
			require: true,
			default: () => 1
		}
	},
	data() {
		return {
			searchKeyWord: '',
			agentName: '所有坐席',
			buisnessData: [],
			recordData: [],
			options: [],
			richText: '', // 富文本内容
			showRichText: false,
			buisnessList: [],
			systemAvata: systemImg
		};
	},
	mounted() {
		MsgRecord.clearMessageData();
		this.initBuisnessRecordList();
	},
	watch: {},
	computed: {
		getMessageRecord() {
			console.log(MsgRecord, 'MsgRecord.messageRecords');
			return MsgRecord.messageRecords;
		}
	},
	methods: {
		//根据坐席名筛选数据
		searchRecordByName() {
			this.searchContent();
		},
		//关键字搜索
		async searchContent() {
			console.log('searchKeyWord: ', this.searchKeyWord);
			try {
				// console.log('searchResult: ', this.recordData);
				if (this.agentName) {
					console.log(this.recordData, 'searchRecordByName', this.agentName);
					if (this.agentName === '所有坐席') {
						this.recordData = _.cloneDeep(this.buisnessData);
					} else {
						this.recordData = _.cloneDeep(this.buisnessData);
						this.recordData = _.cloneDeep(this.buisnessData).filter(item => item.fromUser.role === 'agent' && item.fromUser.name === this.agentName);
					}
				}
				this.searchKeyWord = this.searchKeyWord.trim();
				if (!this.searchKeyWord) {
					return;
				}
				let result = [];
				this.recordData.map(item => {
					if (
						(item.title && item.title.indexOf(this.searchKeyWord) !== -1) ||
						(item.fromUser.picture && item.fromUser.picture.indexOf(this.searchKeyWord) !== -1) ||
						(item.fromUser.name && item.fromUser.name.indexOf(this.searchKeyWord) !== -1) ||
						(item.createdAt && item.createdAt.indexOf(this.searchKeyWord) !== -1) ||
						(item.data.text && item.data.text.indexOf(this.searchKeyWord) !== -1)
					) {
						result.push(item);
					}
				});
				result.map(item => {
					item.title = this.brightKeyword(item.title);
					item.fromUser.picture = this.brightKeyword(item.fromUser.picture);
					item.fromUser.name = this.brightKeyword(item.fromUser.name);
					item.createdAt = this.brightKeyword(item.createdAt);
					item.data.text = this.brightKeyword(item.data.text);
				});
				this.recordData = result;
			} catch (error) {
				console.log(error);
				this.$message.error('搜索失败！');
			}
		},
		brightKeyword(val) {
			if (!val) {
				return val;
			}
			let keyword = this.searchKeyWord; //获取输入框输入的内容
			console.log(val.indexOf(keyword));
			if (val.indexOf(keyword) !== -1) {
				//如果包含的话，就把这个字段中的那一部分进行替换成html字符 padding:2px
				const htmlFragment = `<text style="color: #6384FE; background: #F0F2F3; ">${keyword}</text>`;
				return val.replace(eval('/' + keyword + '/g'), htmlFragment);
			}
			// console.log('brightKeyword', keyword);
			// console.log('val:', val);
			return val;
		},
		initBuisnessRecordList() {
			getBusinessRecord(this.sessionId)
				.then(res => {
					// console.log(res.data);
					MsgRecord.clearMessageData();
					MsgRecord.setMessageRecord(res.data);
					this.buisnessData = MsgRecord.messageRecords;
					// this.recordData = JSON.parse(JSON.stringify(this.buisnessData));
					this.getSessionAllAgents(this.buisnessData);
					this.recordData = _.cloneDeep(this.buisnessData);
					console.log(this.recordData, 'getBusinessRecord::');
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取业务操作记录失败！');
				});
		},
		getSessionAllAgents(data) {
			let agents = [
				{
					label: '所有坐席',
					value: '所有坐席'
				}
			];
			if (data) {
				data.map(item => {
					if (item && item.fromUser && item.fromUser.role === 'agent') {
						agents.push({
							label: item.fromUser.name,
							value: item.fromUser.name
						});
					}
				});
			}
			console.log(agents);
			this.options = _.uniqWith(agents, _.isEqual);
		},

		// 下载业务操作记录
		onClickDownload() {
			const nodes = document.querySelectorAll('div.buisness-item-wrapper');
			const list = [].slice.call(nodes);
			const innertext = list
				.map(function (e) {
					return e.innerText;
				})
				.join('\n');
			// console.warn('innertext : ', innertext);
			if (innertext) {
				const blob = new Blob([innertext], { type: 'text/plain;charset=utf-8' });
				const fileName = this.sessionId + '业务操作记录' + '.txt';
				saveAs(blob, fileName);
				setOperationLogFuntion({ type: '1', category: 'downloadAndExport', content: '下载业务操作记录' });
			} else {
				this.$message.error('下载业务操作记录失败！');
			}
		},
		// 推送富文本弹框
		openRichText(data) {
			console.log(data);
			this.showRichText = true;
			this.richText = data.content;
		},
		closeRichText() {
			this.showRichText = false;
		}
	}
};
</script>

<style lang="less" scoped>
.buisness-record-container {
	padding: 20px;
	.el-input {
		width: 370px;
	}
	.el-select {
		width: 140px;
		margin-right: 20px;
	}
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.download-btn {
			background: #6384fe;
			border-radius: 4px;
			color: #fff;
		}
		.gray-btn {
			background: #e7e7e7;
			border: none;
			color: #fff;
		}
	}
	.search {
		color: #666;
	}
	.buisness-box {
		margin-top: 12px;
		background: #ffffff;
		border-radius: 5px;
		border: 1px solid #ebebeb;

		.buisness-title {
			padding: 9px 0 10px 16px;
			border-bottom: 1px solid #ebebeb;
			font-size: 13px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #333333;
		}

		.message-box {
			display: flex;
			// flex-wrap: wrap;
			// align-items: center;

			.left-userAvatar {
				padding: 14px 20px;
			}

			.right-message {
				.agent-time {
					padding-top: 11px;
					font-size: 12px;
					font-family: PingFangSC-Medium, PingFang SC;
					.agent-name {
						font-weight: 500;
						color: #444444;
					}
					.buisness-startAtTime {
						font-weight: 400;
						color: #808184;
						padding-left: 18px;
					}
				}
				.operationDesc-text {
					font-size: 12px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #5a5a5a;
					padding: 8px 0 12px 0;
				}
				.richtext-look {
					color: #6384fe;
					display: inline-block;
					font-size: 12px;
					margin: -65px 0 0 95px;
					cursor: pointer;
				}
			}
		}
	}
}
</style>

<style lang="less">
.buisness-record-container {
	.search {
		.el-input__icon {
			line-height: 100%;
		}
	}
}
.el-avatar > img {
	width: 100%;
}
.information .el-dialog .el-dialog__body {
	background: #f6f6f6;
}
.information .el-dialog__header {
	text-align: center;
	border-bottom: none;
	background: #f6f6f6;
}
.information .el-dialog__title {
	font-size: 16px;
	font-family: PingFang SC;
	font-weight: 700;
	color: #333333;
	line-height: 24px;
}
.information .el-dialog {
	-webkit-box-shadow: none;
	box-shadow: none;
}
</style>
